<template>
	<view>
		<u-sticky bgColor="#ffffff">
			<view class="mainpadding">
				<view class="flexbetween" v-if="zs_type!=2">
					<view class="bigtext flexcenter hei_text flexcenter bold" v-if="zs_type!=1" @click="calendarshow=true">
						<view class="margin_right3">{{start_date}}</view>
						<u-icon name="arrow-rightward" size="20" color="#333"></u-icon>
						<view class="margin_left">{{end_date}}</view>
					</view>
					<view class="bigtext flexcenter hei_text flexcenter bold" v-if="zs_type==1" @click="messageTime.timeShow=true">
						<view class="margin_right3">{{start_date}}</view>
						<u-icon name="arrow-rightward" size="20" color="#333"></u-icon>
						<view class="margin_left">{{end_date}}</view>
					</view>
					<view class="hei_text bold bigtext">共{{rznum}}晚</view>
				</view>
				<view class="bigtext flexcenter hei_text flexcenter bold" v-if="zs_type==2" @click="messageTime.timeShow=true">
					<view class="margin_right3">{{start_date}}開始</view>
				</view>
				<view class="margin_top">
					<scroll-view class="white_nowrap" scroll-x>
						<view class="flexleft">
							<view class="margin_right2" v-for="(item,index) in lclist">
								<view :class="lc_id==item.id?'cateSelect':'cateNoSelect'" @click="selectCate(item)">
									{{item.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding2" v-if="lc_id==0" style="padding-bottom: 150rpx;">
			<view class="" v-for="(item,index) in hotelList" :key="index">
				<view class="bigtext margin_top hei_text bold">{{item.shop_name}}</view>
				<view class="flexleft margin_top ffffff radius" v-for="ite in item.goodslist" :key="ite.id"
					@click="hoteldetail(ite.id)">
					<image :src="ite.image_text" style="width: 270rpx;height: 270rpx;min-width: 270rpx;" class="radio"
						mode=""></image>
					<view class="mainpadding radius flexcolumnbet"
						style="height: 280rpx;box-sizing: border-box;width: 100%;padding: 10rpx; 30rpx 10rpx 30rpx">
						<view class="">
							<view class="titletext xiaohei bold">{{ite.num}}
							</view>
							<view class="margin_top1 bold" v-show="ite.des" style="color: #333;font-size: 24rpx;">{{ite.des}}</view>
						</view>
						<view class="" style="width: 100%;">
							<view class="xiaohei main_size flexleft flex_wrap">
								<view class="margin_right1 guigek"  v-for="(it,ind) in ite.fwss_text" :key="it">{{it}}</view>
							</view>
							<view class="flexbetween margin_top1" style="width: 100%;">
								<view class="flexleft">
									<view class="itemtime">享受{{ite.sharezk}}折</view>
									<text class="xiaohuang margin_left1" style="font-size: 28rpx;">剩餘:{{ite.house_num}}</text>
								</view>
								<view class="bigtext flexright bold xiaohong" style="margin-top: 3rpx;">${{ite.pricedata.price}}元</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding2" v-if="lc_id!=0" style="padding-bottom: 150rpx;">
			<view class="flexleft margin_top ffffff radius" v-for="ite in hotelList" :key="ite.id"
				@click="hoteldetail(ite.id)">
				<image :src="ite.image_text" style="width: 270rpx;height: 270rpx;min-width: 270rpx;" class="radio"
					mode=""></image>
				<view class="mainpadding radius flexcolumnbet"
					style="height: 280rpx;box-sizing: border-box;width: 100%;padding: 10rpx; 30rpx 10rpx 30rpx">
					<view class="">
						<view class="titletext xiaohei bold">{{ite.num}}</view>
						<view class="margin_top1 eshiliu bold" v-show="ite.des" style="color: #333;">{{ite.des}}</view>
					</view>
					<view class="" style="width: 100%;">
						<view class="xiaohei main_size flexleft flex_wrap">
							<view class="margin_right1 guigek"  v-for="(it,ind) in ite.fwss_text" :key="it">{{it}}</view>
						</view>
						<view class="flexbetween margin_top1" style="width: 100%;">
							<view class="flexleft">
								<view class="itemtime">享受{{ite.sharezk}}折</view>
								<text class="xiaohuang margin_left1" style="font-size: 28rpx;">剩餘:{{ite.house_num}}</text>
							</view>
							<view class="bigtext flexright bold xiaohong" style="margin-top: 3rpx;">${{ite.pricedata.price}}元</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="footerBox">
			<view class="footerPirce flexbetween">
				<view class="flexbetween" style="width: 100%;">
					<view class="flexleft paddingtb padding_left3">
						<view class="cart margin_right3" @click="goCart">
							<view class="num">{{ydjdList.length}}</view>
						</view>
						<view class="line_r margin_right2"></view>
						<view>
							<text class="color_ling text_d">合計：</text>
							<text class="totalPrice">$</text>
							<text class="totalPrice" style="font-size: 36rpx;">{{returnHotelprice()}}</text>
						</view>
					</view>
				</view>
				<view class="settlement" @click="goCart">結帳</view>
			</view>
		</view>
		<u-calendar  confirmText="確認" title="選擇日期" startText="開始" :monthNum ="30" endText="結束" :show="calendarshow" mode="range" @close="calendarshow=false" color="#fbb826" @confirm="calendarconfirm"></u-calendar>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				lclist: [],
				lc_id: 0,
				rznum: 0,
				start_date: "",
				end_date: "",
				shop_id: uni.getStorageSync("shop_id"), //店鋪id
				hotelList: [],
				calendarshow:false,//日曆選擇器
				zs_type:"",
				messageTime: {
					timeShow: false,
					title: "選擇日期",
					mode: "datetime", //date日期，datetime年月日时分秒，time时间，year-month年月
					minDate: Number(new Date()) //最小时间
				},
				allnum:0,
				yhlxid:"",
				is_yc:0,
				ydjdList:[],//酒店購物車
				adult_num:"",
				old_num:"",
				child_num:"",
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.rznum = data.rznum
			this.start_date = data.start_date
			this.end_date = data.end_date
			this.zs_type = data.zs_type
			this.allnum = data.allnum
			this.yhlxid = data.yhlxid
			this.is_yc = data.is_yc
			this.adult_num = data.adult_num
			this.old_num = data.old_num
			this.child_num = data.child_num
			this.getqy()
		},
		onShow() {
			this.getgwc()
			this.getlist()
		},
		methods: {
			getgwc(){
				httpRequest.request("/api/hotel/orderIndex", "GET", {
					shop_id: this.shop_id,
					data_type:1
				}).then(res => {
					this.ydjdList = res.data
				})
			},
			returnHotelprice(){
				let price = 0
				this.ydjdList.forEach(item=>{
					price = (Number(item.pay_price) + Number(price))
				})
				return price
			},
			goCart(){
				if(!this.ydjdList.length){
					httpRequest.toast("請添加之後操作")
					return false
				}
				let data = {
					rznum:this.rznum,
					start_date:this.start_date,
					end_date:this.end_date,
					zs_type:this.zs_type,
					allnum:this.allnum,
					yhlxid:this.yhlxid,
					is_yc:this.is_yc,
					adult_num:this.adult_num,
					old_num:this.old_num,
					child_num:this.child_num,
				}
				uni.navigateTo({
					url: '/pages_index/jiudiangwc?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			timeConfirm(e) {
				this.start_date = e
				this.end_date = e
				this.rzcontent = e
				this.getlist()
			},
			calendarconfirm(e){
				this.start_date = e[0]
				this.end_date = e[e.length-1]
				this.rznum = e.length-1
				this.rzcontent = this.start_date+"至"+this.end_date+"共"+this.rznum+"晚"
				this.calendarshow=false
				this.getlist()
			},
			selectCate(item) {
				this.lc_id = item.id
				this.getlist()
			},
			getqy() {
				httpRequest.request("/api/hotel/shopAreaIndex", "GET", {
					shop_id: this.shop_id
				}).then(res => {
					this.lclist = res.data
					res.data.unshift({
						id: 0,
						name: "全部"
					})
				})
			},
			getlist() {
				httpRequest.request("/api/hotel/shopTableIndex", "POST", {
					shop_id: this.shop_id,
					lc_id: this.lc_id,
					start_date:this.start_date,
					end_date:this.end_date,
					zs_type:this.zs_type,
					allnum:this.allnum,
					yhlxid:this.yhlxid,
					is_yc:this.is_yc,
					adult_num:this.adult_num,
					old_num:this.old_num,
					child_num:this.child_num,
				}).then(res => {
					this.hotelList = res.data
				})
			},
			hoteldetail(id){
				let data = {
					rznum:this.rznum,
					start_date:this.start_date,
					end_date:this.end_date,
					zs_type:this.zs_type,
					allnum:this.allnum,
					yhlxid:this.yhlxid,
					id,
					is_yc:this.is_yc,
					adult_num:this.adult_num,
					old_num:this.old_num,
					child_num:this.child_num,
				}
				uni.navigateTo({
					url: '/pages_index/jiudianxq?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			}
		}
	}
</script>

<style scoped>
	.itemtime {
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		border-radius: 50px;
		position: relative;
		background-color: #ff0000;
		color: #fff;
		font-size: 24rpx
	}

	.ggline {
		width: 8rpx;
		height: 33rpx;
		border-radius: 23rpx;
		background-color: #3478f5;
	}

	.spbox {
		width: 48%;
	}

	.sptp {
		width: 100%;
		height: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
	}

	.spbox {
		background: #FFFFFF;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}

	.cateNoSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		line-height: 53rpx;
		text-align: center;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.cateSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		text-align: center;
		background: rgba(255, 92, 0, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF5C00;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}
	/* 底部 */
	.footerBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 40rpx;
	
		.footerPirce {
			width: 708rpx;
			height: 101rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 53rpx 53rpx 53rpx 53rpx;
		}
	
		.cart {
			width: 40.5rpx;
			height: 42.58rpx;
			background-image: url("@/static/images/index/cart_num.png");
			background-size: 100% 100%;
			position: relative;
		}
	
		.num {
			width: 35rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			background: #FF5C00;
			border-radius: 50%;
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			font-size: 17rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	
		.line_r {
			width: 0;
			height: 42rpx;
			border-right: 2rpx dashed rgba(0, 0, 0, 1);
		}
	
		.totalPrice {
			font-size: 26rpx;
			font-family: DIN Next LT Pro-Medium;
			font-weight: 500;
			color: rgba(253, 70, 62, 1);
		}
	
		.settlement {
			width: 178rpx;
			min-width: 178rpx;
			max-width: 178rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FFB800;
			border-radius: 0rpx 53rpx 53rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	
		.settlementleft {
			width: 150rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #ff8505;
			border-radius: 53rpx 0 0rpx 53rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}
	.guigek{
		background-color: #31a3d6;
		color: #fff;
		border-radius: 10rpx;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
	}
</style>